<template>
  <div id="sign-up">
    <div class="sign-top-wrap">
      <div
        class="golist"
        @click="$router.push('index')"
      >
        <span>
          <i class="iconfont icon-xiangzuo-copy"></i>
          返回列表
        </span>
      </div>
      <div class="sign-top">
        <div class="sign-top-img">
          <img
            :src="info.iconPath"
            alt=""
          />
        </div>
        <div class="sign-top-txt">
          <div>
            <div>{{  info.name  }}</div>
            <div
              v-if="info.matchType == 1"
              class="list-type lt1"
            >计时赛</div>
            <div
              v-if="info.matchType == 2"
              class="list-type lt2"
            >模拟赛</div>
            <div
              v-if="info.matchType == 3"
              class="list-type lt3"
            >自由练习</div>
          </div>
          <div>{{  info.introduction  }}</div>
          <div>比赛时间：{{  info.startTime  }}-{{  info.endTime  }}</div>
          <div class="sign-group">
            <div class="sign-group-left">
              <!--
                    form 个人赛1 小组赛2
                    matchStatus 未开始1 进行中2 已结束3
                    matchType 计时赛1 模拟赛2 自由练习3
                    isApply 未报名false 已报名true
                    notStartStatus 0立即报名 1已结束
                 -->
              <!--
                判断显示哪个按钮
                选手和未登录 form  matchStatus  matchType  isApply  notStartStatus
                ==================================================================
                报名结束 ->   \        1          1,2     false         1
                立即报名 ->   1        1          1,2     false         0
                团队报名 ->   2        1          1,2     false         0
                已报名   ->   \        1          1,2      true         \
                进入比赛 ->   \        2           (3)       \          \
                已结束   ->   \        3           \         \          \
                ==================================================================
                倒计时   ->   \       1,2         1,2        \          \
              -->
              <div v-if="roleId == 'STUDENT' || roleId == undefined">
                <div
                  v-if="
                  info.matchStatus == 1 &&
                  info.matchType != 3 &&
                  info.isApply == false &&
                  info.notStartStatus == 1
                "
                  class="sign-btn disabled-btn"
                >
                  报名结束
                </div>
                <div
                  v-if="
                  info.form == 1 &&
                  info.matchStatus == 1 &&
                  info.matchType != 3 &&
                  info.isApply == false &&
                  info.notStartStatus == 0
                "
                  class="sign-btn"
                  @click="oneSign"
                >
                  立即报名
                </div>
                <div
                  v-if="
                  info.form == 2 &&
                  info.matchStatus == 1 &&
                  info.matchType != 3 &&
                  info.isApply == false &&
                  info.notStartStatus == 0
                "
                  class="sign-btn"
                  @click="add"
                >
                  <span>团队报名</span>
                </div>
                <div
                  v-if="
                  info.matchStatus == 1 && info.matchType != 3 && info.isApply == true
                "
                  class="sign-btn"
                  @click="add"
                >
                  <span>已报名</span>
                </div>
                <div
                  v-if="info.matchStatus == 2 || info.matchType == 3"
                  class="sign-btn"
                  @click="toMatch"
                >
                  <span>进入比赛</span>
                </div>
                <div
                  v-if="info.matchStatus == 3"
                  class="sign-btn"
                >
                  <span>已结束</span>
                </div>
              </div>
              <!-- 教师 管理员 -->
              <div v-if="roleId == 'TEACHER' || roleId == 'ADMIN'">
                <div
                  class="sign-btn"
                  @click="toMatch"
                >进入比赛</div>
              </div>
              <!-- 报名中和计时赛、模拟赛有倒计时 -->
              <div
                v-if="info.matchStatus != 3 && info.matchType != 3"
                class="sign-time"
                v-html="getTime(secDown)"
              >
              </div>
            </div>

            <div
              v-if="info.matchType != 3"
              class="sign-group-right"
            >
              <div
                v-if="info.form == 1"
                class="list-persontype lp2"
              >个人赛</div>
              <div
                v-if="info.form == 2"
                class="list-persontype lp1"
              >小组赛</div>
              <div>已报名人数：{{  info.applyUserNum  }}</div>
            </div>
          </div>
          <div class="join-type">
            <span v-if="info.matchStatus == 1 && info.notStartStatus == 1">未开始</span>
            <span v-if="info.matchStatus == 1 && info.notStartStatus == 0">报名中</span>
            <span v-if="info.matchStatus == 2">进行中</span>
            <span v-if="info.matchStatus == 3">已结束</span>
          </div>
        </div>
      </div>
    </div>
    <div class="sign-content">
      <div class="sign-left jx-content">
        <div class="sign-left-title">比赛介绍</div>
        <div class="sign-left-content">
          <div
            v-if="htmlContent"
            class="markdown-body"
            v-html="htmlContent"
          ></div>
          <div
            v-else
            class="nodata-muban"
          >暂无数据</div>
        </div>
      </div>
    </div>
    <add-players ref="addplayers" />
    <register-vue ref="register" />
    <div
      v-if="addSuccess"
      class="add-success"
    >
      <div>
        <div @click="hideSuccessDialog">
          <i class="el-icon-close"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import registerVue from "../../components/register.vue";
import addPlayers from "./../competitionManagement/components/addPlayers";
export default {
  components: {
    addPlayers,
    registerVue,
  },
  data() {
    return {
      addSuccess: false,
      //比赛介绍
      htmlContent: "",
      roleId: "",
      timer: null,
      courseId: "",
      secDown: "",
      info: {
        isOwn: false,
        applyEndTime: "",
        applyStartTime: "",
        applyUserNum: 0,
        computeAuto: false,
        computeAutoRadio: 0,
        computeSubjective: false,
        computeSubjectiveRadio: 0,
        computeTime: false,
        computeTimeRadio: 0,
        courseBasicId: 0,
        courseOutline: false,
        deleted: false,
        direction: [[0]],
        endTime: "",
        form: 0,
        formGroupNum: 0,
        icon: 0,
        iconPath: "",
        id: 0,
        imageLoadTypeStr: "",
        introduction: "",
        isApply: false,
        judgeButton: false,
        matchStatus: 0,
        matchType: 0,
        name: "",
        ownCourse: false,
        preseted: false,
        reportForm: 0,
        startTime: "",
        status: 0,
        typeName: "",
      },
    };
  },
  destroyed() {
    // 每次离开当前界面时，清除定时器
    clearInterval(this.timer);
    this.timer = null;
  },
  created() {
    this.roleId = this.$store.state.user.roles[0];
    this.courseId = this.$route.query.courseId;
    this.init();
  },
  methods: {
    init() {
      this.getInfo();
      this.getContent();
    },
    showSuccessDialog(){
      this.addSuccess = true;
    },
    hideSuccessDialog(){
      this.addSuccess = false;
    },
    //获取编辑器内容
    getContent() {
      this.$http
        .get(`/tes/course/${this.courseId}/resource?resourceType=15`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            if (res.data.courseOutline.displayVersion.length > 0) {
              this.htmlContent =
                res.data.courseOutline.displayVersion[0].htmlContent;
            }
          } else {
            this.$message.error(res.message);
          }
        });
    },
    //团队添加后回显
    getAddInfo() {
      this.$refs.addplayers.showDialog();
    },
    //进入比赛
    toMatch() {
      //lyl跳页测试
      // console.log(123);
      // this.$router.push({
      //   path: '/CompetitionDetail',
      //   query: { courseId: this.courseId },
      // })
      // this.$localstorage.putLocalStorage('setCourseId', this.courseId)

      this.$http
        .get(`/tes/match/enter/${this.courseId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            //进入比赛跳页往这写
            this.$router.push({
              path: "/CompetitionDetail",
              query: { courseId: this.courseId },
            });
            this.$localstorage.putLocalStorage("setCourseId", this.courseId);
          } else if (res.code == "401") {
            this.$message.error(res.message);
            this.$router.push("login");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(res.message);
          console.log(err);
        });
    },
    //立即报名
    oneSign() {
      //是否登录
      if (this.roleId) {
        //报名
        this.onSign();
      } else {
        //注册并报名
        this.$refs.register.isSign = true;
        this.$refs.register.dialogAdd = true;
      }
    },
    //选手报名
    onSign() {
      console.log(2233445566);
      this.$http
        .post(`/tes/unauthorized/apply/person/${this.courseId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.$message.success(res.message);
            this.init();
            this.showSuccessDialog();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(res.message);
          console.log(err);
        });
    },
    //秒转时分
    getTime(sec) {
      //日
      let day = Math.floor(sec / 60 / 60 / 24);
      sec = sec - day * 60 * 60 * 24;
      //时
      let hour = Math.floor(sec / 60 / 60);
      sec = sec - hour * 60 * 60;
      hour = hour < 10 ? `0${hour}` : hour;
      //分
      let minute = Math.floor(sec / 60);
      sec = sec - minute * 60;
      minute = minute < 10 ? `0${minute}` : minute;
      //秒
      sec = sec < 10 ? `0${sec}` : sec;
      let strName = "";
      if (this.info.matchStatus == 1) {
        if (this.info.notStartStatus == 0) {
          strName = "报名结束";
        }
        if (this.info.notStartStatus == 1) {
          strName = "比赛开始";
        }
      }
      if (this.info.matchStatus == 2) {
        strName = "比赛结束";
      }
      return `离${strName}<span>${day}</span>天<span>${hour}</span>时<span>${minute}</span>分<span>${sec}</span>秒`;
    },
    //定时器 考试时间计算
    setTimer() {
      if (this.timer == null) {
        let self = this;
        self.timer = setInterval(() => {
          if (self.secDown <= 0) {
            clearInterval(self.timer);
            return;
          }
          self.secDown--;
        }, 1000);
      }
    },
    add() {
      return;
      if (this.info.form == 2) {
        this.$refs.addplayers.showDialog(this.info.isApply);
      }
    },
    toDetails() {
      this.$router.push({
        path: "",
      });
    },
    //获取导入数据
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$http
        .get(`/tes/match/info/${this.courseId}`)
        .then((response) => {
          let res = response.data;
          if (res.code == "200") {
            this.info = res.data;
            this.secDown = res.data.countDown;
            //自由练习没有倒计时、开始比赛和已结束没有倒计时
            let isTimeDown =
              res.data.matchType != 3 && res.data.matchStatus != 3;
            if (isTimeDown) {
              this.setTimer();
            }
          } else {
            this.$message.error(res.message);
          }
          loading.close();
        })
        .catch((err) => {
          console.log(err);
          loading.close();
        });
    },
  },
};
</script>
<style lang="scss">
#sign-up {
  .sign-top-wrap {
    background: #fff;
  }

  .golist {
    width: 1200px;
    margin: 0 auto;
    height: 55px;
    line-height: 55px;

    span {
      cursor: pointer;

      &:hover {
        opacity: 0.9;
      }
    }
  }

  .sign-top {
    width: 1200px;
    margin: 0 auto 40px;
    padding: 0 0 20px 0;
    display: flex;

    .sign-top-img {
      img {
        width: 238px;
        height: 238px;
      }

      margin-right: 20px;
    }

    .sign-top-txt {
      width: 100%;
      position: relative;

      > div {
        &:nth-child(1) {
          display: flex;
          align-items: center;
          height: 25px;
          font-size: 24px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #000000;
          margin: 15px 0;

          .list-type {
            padding: 0 8px;
            height: 22px;
            line-height: 22px;
            font-size: 14px;
            text-align: center;
            color: #fff;
            margin-left: 10px;
            font-weight: normal;

            &.lt1 {
              background: #13b5b1;
            }

            &.lt2 {
              background: #eb6100;
            }

            &.lt3 {
              background: #295ef6;
            }
          }
        }

        &:nth-child(2) {
          height: 72px;
        }

        &:nth-child(2),
        &:nth-child(3) {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #6c696b;
          margin-bottom: 10px;
          line-height: 24px;
        }

        &.sign-group {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 36px;

          .sign-group-left {
            display: flex;

            > div {
              display: flex;
              align-items: center;
            }

            .sign-btn {
              width: 104px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              color: #fff;
              background: #2932e1;
              cursor: pointer;

              &.disabled-btn {
                cursor: no-drop;
                background: #ccc;
              }

              &:hover {
                opacity: 0.9;
              }
            }

            .sign-time {
              margin-left: 20px;

              > span {
                background: #fff2f0;
                color: red;
                padding: 5px 8px;
                margin: 0 10px;
              }
            }
          }

          .sign-group-right {
            display: flex;
            align-items: center;

            > div {
              &:first-child {
                margin-right: 10px;
              }

              &.list-persontype {
                width: 43px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                font-size: 12px;

                &.lp1 {
                  color: rgb(221, 29, 111);
                  background: rgba(221, 29, 111, 0.15);
                  border: 1px solid #dd1d6f;
                }

                &.lp2 {
                  color: rgb(249, 160, 80);
                  background: rgba(249, 160, 80, 0.15);
                  border: 1px solid #f9a050;
                }
              }
            }

            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #727272;
            margin-right: 20px;
          }
        }

        &.join-type {
          position: absolute;
          top: 20px;
          right: 20px;
          border: 1px solid #2932e1;
          color: #2932e1;
          padding: 0 14px;
          line-height: 24px;
        }
      }
    }
  }

  .sign-content {
    width: 1200px;
    margin: 0 auto;
    display: flex;

    .sign-left {
      min-height: 400px;

      .sign-left-title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #2a3645;
        margin-bottom: 24px;
      }

      .sign-left-time {
        > div {
          &:nth-child(1) {
            font-size: 18px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #455366;
          }

          &:nth-child(2) {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #455366;
          }
        }
      }
    }
  }
  .add-success {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    > div {
      position: relative;
      width: 498px;
      height: 359px;
      background: url("../../assets/images/add-success.png") no-repeat 0 0;
      > div {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 24px;
        color: #a3a3a3;
        &:hover {
          color: #333;
        }
      }
    }
  }
}
</style>
